<template>

    <div  class="card" >
  <el-row>
  <el-col class="col" :span="6" >
      <div class="grid-content bg-purple">
    <el-card :body-style="{ padding: '0px' }">
      <img :src="`data:image/png;base64,`+booklist.bookcover" class="image">
    </el-card>
    </div>
  </el-col>
  <el-col :span="7"><div class="grid-content bg-purple-light">
      <h2>{{booklist.title}}</h2><h3>{{booklist.author}}</h3><h3>上传者</h3><h3><time class="time">{{ currentDate }}</time></h3><h4>书本大小</h4></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple" style="margin-left:10%"><h4 >{{booklist.description}}</h4><el-button  style="position:absolute;margin-left:50%;top:150px;width:25%" type="info">Download</el-button></div></el-col>
</el-row>

</div>
</template>

<script>
import Header from '../components/Header.vue'
export default {
    name:'enterPage',
    component:{Header},
    data(){
    return {
      currentDate: new Date(),
      booklist:{
        id:'',
        title:'',
        author:'',
        description:'',
        bookcover:'',
      }
    };
},
mounted() {
			this.$bus.$on('emitData',(dataObj)=>{
        this.booklist={...this.booklist,...dataObj}
             
      })}
}
</script>

<style scoped >
.card {
    height: 750px;
		margin: 90px;
        border-radius: 20px;
		border: 5px solid #efefef;
		
	}
    .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
   
    .el-col {
    border-radius: 4px;
    margin: 10px 0px 0px 15%;
  }
    .wenzi{
        text-align: center
    }


  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 250px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>